<template>
  <div class="container">
    <div id="Home_page">
      <!-- <div><span @click="back_home" id="back_home" class="iconfont icon-fanhui">回到首页</span></div> -->
    </div>
    <div class="login_box">
      <form>
        <div><span id="back_home" class="iconfont icon-fanhui" @click="router.push('/login')">回到首页</span></div>
        <h2>登录</h2>
        <div class="input_box">
          <span><i class="iconfont icon-shouji"></i></span>
          <input type="text" id="phone" name="phone" placeholder="手机号" required v-model="phone"
            autocomplete="family-name" />
        </div>
        <div class="input_box">
          <button type="button" @click="send_code" v-if="!show">获取验证码</button>
          <button type="button" v-if="show">{{ time }}s后重试</button>
          <input type="text" id="code" name="code" placeholder="验证码" v-model="code" />
        </div>
        <input type="button" id="login" name="login" value="登录" @click="register" class="login_btn" />
      </form>
    </div>
  </div>
</template>

<script setup>
import axios from "../utils/http.js";


import { ref } from "vue"
import { useRouter } from "vue-router"
let show = ref(false)
let time = ref(60)
let router = useRouter()
let phone = ref('')
let code = ref('')
function send_code() {
  axios({
    url: 'register/',
    method: 'POST',
    data: {
      phone: phone.value
    }
  }).then(res => {
    console.log(res.data)
    if (res.data.code == 200) {
      console.log("验证码发送成功");
    } if (show.value == true) {
      let timer = setInterval(() => {
        time.value--;
        if (time.value <= 0) {
          clearInterval(timer)
          show.value = false
          time.value = 60
        }
      }, 1000)
    }
    else {
      show.value = true
      if (show.value == true) {
        let timer = setInterval(() => {
          time.value--;
          if (time.value <= 0) {
            clearInterval(timer)
            show.value = false
            time.value = 60
          }
        }, 1000)
      }
    }
  }).catch(err => {
    console.log("失败》》》》》");
  })
}
function register() {
  axios({
    url: "user/users/",
    method: "POST",
    data: {
      phone: phone.value,
      code: code.value
    }
  }).then(res => {
    if (res.data.code == 200) {
      let role = res.data.role
      if (role == '管理员') {
        router.push('/admin')
      } else if (role == '学生') {
        router.push('/student')
      } else if (role == '班主任') {
        router.push('/c_teacher')
      } else if (role == '老师') {
        router.push('/teacher')
      } else if (role == '院长') {
        router.push('/dean')
      } else if (role == '校长') {
        router.push('/rector')
      } else if (role == '市场') {
        router.push('/markheader')
      }
      localStorage.setItem('username', res.data.user)
      localStorage.setItem('token', res.data.token)
    } else {
      alert('验证码错误')
    }
  })
}
</script>

<style scoped>
@import url('https://at.alicdn.com/t/c/font_4437435_sl83v9ltr19.css');

#Home_page {
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(110, 110, 110, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(15px);
  justify-content: space-between;
}

#Home_page div {
  color: white;
  margin-left: 40px;
  line-height: 50px;
}

.iconfont {
  color: #fff;
  font-size: 16px;
  line-height: 50px;
}

#back_home:hover {
  text-decoration: underline;
  cursor: pointer;
}

.container {
  width: 100%;
  min-height: 100vh;
  background: url("../assets/forest.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .login_box {
  position: absolute;
  width: 390px;
  height: 420px;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(15px);
}

.login_box h2 {
  font-size: 28px;
  text-align: center;
  color: #fff;
}

.login_box .input_box {
  position: relative;
  width: 310px;
  margin: 30px 0;
  border-bottom: 2px solid #fff;
}

.input_box input {
  width: 100%;
  height: 50px;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: #fff;
  padding: 0 35px 0 5px;
}

.input_box input::placeholder {
  color: #fff;
}

.input_box .iconfont {
  position: absolute;
  right: 10px;
  color: #fff;
  font-size: 20px;
  line-height: 50px;
}

.remember_forgot {
  margin: -15px 0 15px;
  font-size: 15px;
  color: #fff;
  display: flex;
  justify-content: space-between;
}

.remember_forgot label input {
  margin-right: 5px;
}

.login_box button {
  width: 100%;
  height: 40px;
  background: #fff;
  border: none;
  outline: none;
  border-radius: 40px;
  cursor: pointer;
  font-size: 17px;
  color: #000;
  transition: all 0.1s;
}

.login_box button:hover {
  color: #fff;
  background: rgb(70, 149, 84);

}

.register_link {
  color: #fff;
  font-size: 15px;
  text-align: center;
  margin: 20px 0 10px;
}

.remember_forgot a,
.register_link a {
  color: #fff;
  text-decoration: none;
}

.remember_forgot a:hover,
.register_link a:hover {
  text-decoration: underline;
}

.login_btn {
  width: 100px;
  height: 40px;
  background-color: transparent;
  color: white;
  border: 0px;
  font-size: 28px;
  margin-left: 110px;
}
</style>